<template>
	<view class="content">
		<scroll-view v-if="userCouponList.length" class="scroll_y" scroll-y="true" @scrolltolower="scroll">
			<view class="popup_item" :class="{active:info.id==item.id}" @tap="select_coupon(item.id,item)"
				v-for="item in userCouponList" :key="item.id">
				<view class="list_left">
					<view class="top">
						<view class="coupon">{{item.title}}</view>
						<view class="condition">滿{{item.min}}可用</view>
					</view>
					<view class="bottom">
						<view class="number">${{item.money}}</view>
						<view class="time">有效期至{{effectiveTime(item.expire_time*1000)}}</view>
					</view>
				</view>
				<view class="list_right">
					<view>去使用</view>
				</view>
			</view>
		</scroll-view>
		<view v-else style="margin: 30rpx;text-align: center;">暫無可用優惠券</view>
	</view>
</template>

<script>
	import {
		getCouponTicketCard
	} from '@/api/me.js'

	export default {
		props: {
			store_id: Number,
			userCouponList: Array,
			minPrice: Number,
			info: Object,
		},
		data() {
			return {
				selectCouponId: '',
				page: 1,
				flag: true,
				list: [],
				couponInfo: ''
			}
		},
		methods: {
			scroll() {},
			effectiveTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1)
				let d = time.getDate() >= 10 ? time.getDate() : "0" + (time.getDate())
				return y + "/" + m + "/" + d
			},
			select_coupon(id, item) {
				this.selectCouponId = this.info.id
				// console.log(this.selectCouponId, id, '111111111111')
				if (this.selectCouponId == id) {
					this.selectCouponId = ""
					this.couponInfo = ''
					this.$emit('selectCouponInfo', {})
				} else {
					// console.log(item,this.minPrice,"1111")

					if (this.minPrice < Number(item.min)) {
						uni.showToast({
							title: '未滿足使用條件',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.selectCouponId = id
						this.couponInfo = item
						this.$emit('selectCouponInfo', item)
					}


				}
				// console.log(this.selectCouponId, "選擇")
			},
		},

	}
</script>

<style lang="less" scoped>
	.content {
		height: 70vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;

		.scroll_y {
			height: 65vh;
			// background-color: skyblue;

			.popup_item {

				height: 154rpx;
				width: 100%;
				// background-color: #39B19D;
				background-color: #999;
				border-radius: 16rpx;
				border: 1rpx solid #F3F5F9;
				display: flex;
				margin-bottom: 30rpx;

				.list_left {
					width: 90%;
					height: 100%;
					background: #fff;
					border-radius: 16rpx;

					.top {
						height: 62rpx;
						border-bottom: 1rpx dashed #999;
						// padding-top: 15rpx;
						// box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;

						.coupon {
							font-size: 23rpx;
							font-weight: bold;
							margin-left: 44rpx;
							position: relative;

							&:before {
								content: '';
								display: block;
								width: 5rpx;
								height: 18rpx;
								background: linear-gradient(180deg, #00BC64 0%, #39B19D 100%);
								border-radius: 2rpx 2rpx 2rpx 2rpx;
								opacity: 1;
								position: absolute;
								left: -20rpx;
								top: 0;
								margin-top: 9rpx;
							}
						}

						.condition {
							font-size: 22rpx;
							color: #999;
							margin-right: 60rpx;
						}

						&:before {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #F3F5F9;
							display: block;
							position: absolute;
							left: 0%;
							bottom: 0%;
							margin-left: -10rpx;
							margin-bottom: -10rpx;
						}

						&::after {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							// background: #39B19D;
							background: #999;
							display: block;
							position: absolute;
							right: 0%;
							bottom: 0%;
							margin-right: -10rpx;
							margin-bottom: -10rpx;
						}
					}

					.bottom {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.number {
							margin: 20rpx 0 0 34rpx;
							font-size: 38rpx;
							color: #FF6600;
							font-weight: bold;
						}

						.time {
							font-size: 22rpx;
							color: #999;
							margin-right: 50rpx;
						}
					}
				}

				.list_right {
					flex: 1;

					view {
						width: 100%;
						// 設置文本竪向排列
						writing-mode: vertical-lr;
						height: 154rpx;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 23rpx;
						// 設置文字間隔
						letter-spacing: 13rpx;
					}
				}

			}

			.active {
				background-color: #39B19D;
				border: 1rpx solid #39B19D;

				.list_left {
					border-color: #39B19D;

					.top {
						border-color: #39B19D;

						&:before,
						&::after {
							background-color: #39B19D;
						}
					}
				}
			}
		}

	}
</style>